<template>
    <div class="box">
        <div class="zb">
            <div class="box1">
                <div class="title">
                    <div class="zb1">'{{ input3 }}'</div>
                    <div class="zb2">相关的主播</div>
                </div>
                <div class="more" @click="tiaozhuan('zb')">更多 ></div>
            </div>
            <div class="box2">
                <van-swipe type="card" :width="120" :height="50">
                    <van-swipe-item class="one" v-for="(item, index) in userViews?.users" :key="index">
                        <!-- <div class="img">{{ item.userInfo }}</div> -->
                        <img class="img" :src="item.userInfo.smallPic">
                        <div class="right">
                            <div class="name">{{ item.userInfo.nickname }}</div>
                            <div class="xinxi">{{ item.userInfo.pTtitle }}</div>
                        </div>
                    </van-swipe-item>

                </van-swipe>
            </div>
        </div>

        <div class="zj">
            <div class="box1">
                <div class="title">
                    <div class="zb1">'{{ input3 }}'</div>
                    <div class="zb2"> 相关的专辑</div>
                </div>
                <div class="more" @click="tiaozhuan('zj')">更多 ></div>
            </div>
            <contentList :list="albumViewsList" :isShow=1></contentList>
        </div>

        <div class="sy">
            <div class="box1">
                <div class="title">
                    <div class="zb1">'{{ input3 }}'</div>
                    <div class="zb2"> 相关的声音</div>
                </div>
                <div class="more" @click="tiaozhuan('sy')">更多 ></div>
            </div>
            <contentList :list="trackViewsList" :isShow=0></contentList>
        </div>
        <div class="xgss1">相关搜索</div>
        <div class="xgss2">
            <div class="xgss2-box">可爱女友是特工</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱女友是特工</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱女友是特工</div>
            <div class="xgss2-box">可爱</div>
            <div class="xgss2-box">可爱女友是特工</div>
            <div class="xgss2-box">可爱</div>

        </div>
    </div>
</template>

<script setup lang="ts">
import contentList from '@/components/contentList/index.vue'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()

//获取数据
import reqApi from '@/api/search/index'
const albumViewsList = ref()
const trackViewsList = ref()
const userViews = ref()

const dd = async (shuru: any) => {
    console.log('222')
    let result = await reqApi.reqTagList4(shuru, 'all', 1, 5)
    console.log('dd', result.data);
    // SearchStore.data = result.data
    console.log('SearchStore-qb', result.data)

    albumViewsList.value = result.data.albumViews.albums
    trackViewsList.value = result.data.trackViews.tracks
    userViews.value = result.data.userViews
    // category.value = result.category
}

console.log('接收', route.query.name)

const input3 = ref<any>('')

//更多跳转
const tiaozhuan = (ly: string) => {
    router.push({
        path: `${ly}`,
    })
    

}

// const activeName = ref<string>('a') 

// const qbsj = ref()

// console.log('qb路由', qbsj.value)


onMounted(() => {
    input3.value = route.query.name
    dd(route.query.name)
})
</script>

<style scoped lang="scss">
// :deep(.el-input__wrapper) {
//     border-radius: 50px;
//     height: 30px;
//     background-color: #eee;
// }

.box {
    box-sizing: border-box;
    width: 100%;
    padding: 0px 10px;

    // .first {
    //     border-bottom: 1px solid #eee;

    //     .top {
    //         display: flex;
    //         height: 35px;
    //         align-items: center;
    //         justify-content: space-around;

    //         .logo {
    //             font-size: 17px;
    //             width: 20%;
    //             color: red;
    //         }

    //         .input {
    //             width: 50%;
    //         }

    //     }
    // }

    .box1 {
        margin-left: 25px;
        font-size: 17px;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 10px 25px;

        .title {
            display: flex;
            justify-content: space-between;
        }

        .more {
            font-size: 10px;
        }
    }

    .zb {
        margin: 20px 0;



        .box2 {
            margin: 10px 0;

            .one {
                display: flex;
                margin: 0 10px;

                .img {
                    border-radius: 50%;
                    margin-right: 5px;
                }

                .name {
                    font-size: 15px;
                    display: inline-block;
                }

                .xinxi {
                    font-size: 10px;
                    margin-top: 5px;
                    color: #aaa;
                }
            }
        }
    }

    .xgss1 {
        padding: 10px 0;
    }

    .xgss2 {
        display: flex;
        flex-wrap: wrap;

        .xgss2-box {
            margin: 5px 5px;
            font-size: 15px;
            padding: 5px 5px;
            background-color: #eee;
        }
    }
}
</style>